<template>
  <view class="input-module">
    <slot name="left"></slot>
    <text class="disabled" v-if="disabled">{{value}}</text>
    <input class="input" :style="{color: color}" :type="type" :value="value" @input="input" @blur="blur" v-else :placeholder="placeholderText"/>
    <view class="input-right">
      <slot name="right"><text class="input-right-text">{{coin}}</text></slot>
    </view>
  </view>
</template>

<script>
export default {
    name: "hb-input-charge-mention",
    props:{
       color: {
         default:'#666666',
         type:String
       },
        coin:{
            default:'',
            type:String
        },
        type: {
            type: String,
            default: 'text'
        },
        placeholderText: String,
        disabled: Boolean,
        value:[String,Number]
    },
    methods: {
        input(e) {
            this.$emit('input', e.detail.value)
        },
        blur() {
            this.$emit('blur')
        }
    }
}
</script>

<style scoped lang="scss">
	.input-module {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  padding: 20rpx;
	  border: 1PX solid $hb-input-border;
	  border-radius: 8rpx;
	  color: #515a6e;
	  background-color: #fff;
	  background-image: none;
	  &[size=small] {
	    padding: 8rpx;
	  }
	}
	.input {
	  padding-left: 10rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  font-size: 28rpx;
	  flex: 1;
	}
	.input-right {
	  display: flex;
	  align-items: center;
	  margin-left: 10rpx;
	}
	.disabled {
	  padding-left: 10rpx;
	  line-height: 50rpx;
	  height: 50rpx;
	  font-size: 28rpx;
	  flex: 1;
	  color:#515a6e;
	  width:306rpx;
	}
	.input-right-text {
	  font-size:28rpx;
	  color: $hb-text-color;
	}
	
</style>
